<template>
	<div>
		<el-form :inline="true" :model="queryForm" ref="queryForm"
			size="small" class="demo-form-inline">
			<el-form-item style="margin-left: 20px;" label="任务名称" prop="taskName">
				<el-input v-model="queryForm.taskName"></el-input>
			</el-form-item>

			<el-form-item label="任务状态" prop="taskState">
				<el-select v-model="queryForm.taskState" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			<span style="margin-left: 20px;">
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchTableData()"
						icon="el-icon-search">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQueryForm()">重置</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="addTaskButtonClick()"
						size="mini" plain>新增
					</el-button>
				</el-form-item>
			</span>
		</el-form>
		<!-- private Integer id;
		  private String taskName;
		  private String taskCorn;
		  private String taskMethod;
		  private Integer taskState;
		  private String createTime;
		  private String updateTime; -->
		<!-- table数据表 -->
		<el-table ref="multipleTable" :data="TableData" tooltip-effect="dark"
			style="width: 95%; margin-left: 20px;margin-top: 20px; ">

			<el-table-column prop="id" label="任务编号 " align="center">
			</el-table-column>
			<el-table-column prop="taskName" label="任务名称" align="center">
			</el-table-column>
			<el-table-column prop="taskCorn" label="cron执行表达式" align="center">
			</el-table-column>
			<el-table-column prop="taskMethod" label="调用目标字符串" align="center">
			</el-table-column>
			<el-table-column prop="taskState" label="任务状态" align="center">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.taskState == 'stop' ? false : true" active-color="#13ce66"
						@change='changeStatus(scope.$index, scope.row)' inactive-color="#ff4949">
					</el-switch>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="success" @click="carryOnce(scope.$index, scope.row)">执行一次</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 修改 -->
		<el-dialog title="修改任务" :visible.sync="editFormVisible" width="30%" style="font-weight: 400;">
			<!-- :rules="sendingMoneyFormRules" -->
			<el-form :model="editDataForm" hide-required-asterisk ref="editDataForm" label-width="135px">

				<el-form-item label="任务编号" label-width="80px">
					<el-input readonly v-model="editDataForm.id"></el-input>
				</el-form-item>
				<el-form-item label="任务名称" label-width="80px">
					<el-input v-model="editDataForm.taskName"></el-input>
				</el-form-item>
				<el-form-item label="表达式" label-width="80px">
					<el-input v-model="editDataForm.taskCorn"></el-input>
				</el-form-item>
				<el-form-item label="调用方法" label-width="80px">
					<el-input v-model="editDataForm.taskMethod"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelEdit()">取 消</el-button>
				<el-button type="primary" @click="editSubmit()">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 新增 -->
		<el-dialog title="新增任务" :visible.sync="addFormVisible" width="30%" style="font-weight: 400;">

			<el-form :model="addDataForm" hide-required-asterisk ref="addDataForm" label-width="135px">


				<el-form-item label="任务名称" label-width="80px">
					<el-input v-model="addDataForm.taskName"></el-input>
				</el-form-item>
				<el-form-item label="表达式" label-width="80px">
					<el-input v-model="addDataForm.taskCorn"></el-input>
				</el-form-item>
				<el-form-item label="调用方法" label-width="80px">
					<el-input v-model="addDataForm.taskMethod"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelAdd()">取 消</el-button>
				<el-button type="primary" @click="addSubmit()">确 定</el-button>
			</span>
		</el-dialog>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[2, 5, 8, 10]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>

	</div>

</template>


<script>
	export default {
		data() {
			return {
				addFormVisible: false,
				addDataForm: {
					taskName: '',
					taskCorn: '',
					taskMethod: ''
				},
				editFormVisible: false,
				options: [{
					value: 'running',
					label: '开启'
				}, {
					value: 'stop',
					label: '停用'
				}],
				TableData: [],
				editDataForm: [],
				// 查询框表单
				queryForm: {
					taskName: '',
					taskState: '',
					roleState: '',
					pageNum: 1,
					pageSize: 5,
				},
				// 总记录数
				totalNum: 0,
			}
		},
		methods: {
			// 提交新增
			addSubmit() {
				this.$axios.post('/tasks', this.addDataForm).then(resp => {
					if (resp.code == 20000) {
						this.$message({
							type: 'success',
							message: '新增成功!',
						});
					} else {
						this.$message({
							type: 'error',
							message: '新增失败!',
						});
					}
					this.getTabledata(this.queryForm);
					this.addFormVisible = false;
				})
			},
			// 执行一次
			carryOnce(index, row) {
				this.$confirm('此操作将执行一次任务, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.get(`/tasks/executeOne/${row.id}`).then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '执行成功!',
							});
						} else {
							this.$message({
								type: 'success',
								message: '执行失败!',
							});
						}
					})
			 }).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消执行'
					});
				});
			},
			editSubmit() {
				this.$axios.put("/tasks", this.editDataForm).then(resp => {
					if (resp.code == 20000) {
						this.$message({
							type: 'success',
							message: '修改成功',
						});
						this.getTabledata(this.queryForm);
					} else {
						this.$message({
					 	type: 'error',
							message: '修改失败',
						});
						this.getTabledata(this.queryForm);
					}
					this.editFormVisible = false;
				})
			},

			cancelEdit() {
				this.editFormVisible = false;
				this.getTabledata(this.queryForm);
			},
			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageNum = 1;
				this.queryForm.pageSize = val;
				this.getTabledata(this.queryForm);
			},
			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getTabledata(this.queryForm);
			},
			handleDelete(index, row) {
				this.$confirm(`此操作将删除名称为${row.taskName}的任务, 是否继续?`, '提示', {
			  confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/tasks/${row.id}`).then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
						} else {
							this.$message({
								type: 'success',
								message: '删除失败!',
							});
						}
						this.getTabledata(this.queryForm);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleEdit(index, row) {
				if (row.taskState == 'running') {
					this.$message({
						type: 'warn',
						message: '请先关闭任务后修改!',
					});
				} else {
					this.editFormVisible = true;
					this.editDataForm = row;
				}
			},
			// queryForm查询按钮
			searchTableData() {
				this.getTabledata(this.queryForm);
			},
			// queryForm重置框
			resetQueryForm() {
				this.queryForm = {
					taskName: '',
					taskState: '',
					roleState: '',
					pageNum: 1,
					pageSize: 5,
				};
				this.getTabledata(this.queryForm);
			},
			// 新增按钮
			addTaskButtonClick() {
				this.addFormVisible = true;
				this.addDataForm = {
					taskName: '',
					taskCorn: '',
					taskMethod: ''
				};
			},

			changeStatus(index, row) {
				if (row.taskState == 'stop') {
					this.$confirm('此操作将把所选的任务置为执行, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.get(`/tasks/start/${row.id}`).then(resp => {
							if (resp.code == 20000) {
								this.$message({
									type: 'success',
									message: '操作成功!',
								});

							} else {
								this.$message({
									type: 'error',
									message: '操作失败!',
								});
							}
							this.getTabledata(this.queryForm);
						})

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						});
					});
				} else if (row.taskState == 'running') {

					this.$confirm('此操作将把所选的任务置为取消, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.get(`/tasks/stop/${row.id}`).then(resp => {
							if (resp.data == 20000) {
								this.$message({
									type: 'success',
									message: '操作成功!',
								});
								this.getTabledata(this.queryForm);
							}
						})
						row.taskState = 'stop';
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						});
					});
				}

			},
			getTabledata(searchData) {
				this.$axios.get("/tasks", {
						params: searchData
					})
					.then(resp => {
						this.TableData = resp.data.list;
						this.totalNum = parseInt(resp.data.total);
					})
			}

		},
		mounted() {
			this.getTabledata(this.queryForm);
		}

	}
</script>

<style>

</style>
